<template>
	<view class="content">
		<!-- #ifndef APP-NVUE || MP-TOUTIAO -->
		<view class="u-demo-block">
			<u-swiper :list="banner" indicator indicatorMode="line" circular :autoplay="false" radius="5"
				bgColor="#ffffff"></u-swiper>
		</view>
		<!-- #endif -->
		<view class="detail">
			<view class="title">{{ detail.title }}</view>
			<!-- <view class="shouc" @tap="shouc">
				<view v-if="issc==0">
					<u-icon name="heart" size="44rpx" color="#23BF61"></u-icon>
				</view>
				<view v-if="issc==1">
					<u-icon name="heart-fill" size="44rpx" color="#23BF61"></u-icon>
				</view>
			</view> -->
			<view class="info">
				<u--text prefixIcon="clock" iconStyle="font-size: 14px" size="14px" color="#666"
					text="营业时间：00:00-24:00"></u--text>
			</view>
			<view class="info">
				<u--text prefixIcon="map" iconStyle="font-size: 16px" size="14px" color="#666"
					:text="address"></u--text>
			</view>
			<view class="gotomap" @click="toMapAPP"><u-icon name="map-fill" color="#23BF61" size="20"></u-icon>
				<text>导航</text>
			</view>
		</view>
		<view style="margin: 15px 0;">
			<u-notice-bar :text="text1"></u-notice-bar>
		</view>
		<view class="content" style="padding: 0 0;">
			<u-sticky bgColor="#fff">
				<view class="nav">
					<u-tabs :list="tablist" lineWidth="40" lineColor="#23BF61" @click="clicknav" :activeStyle="{
						color: '#303133', fontSize: '34rpx', fontWeight: 'bold',
					}" :inactiveStyle="{
						color: '#606266',
						color: '#303133', fontSize: '34rpx', fontWeight: 'bold',
					}" itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;">
					</u-tabs>
				</view>
			</u-sticky>
			<view class="list" v-if="type == 0">
				<view class="item" v-for="(item, index) in detail.czarr">
					<view v-if="item.stutas == true">
						<navigator @tap="gotoact(id, item.name)" class="iteminfo">
							<img src="../../static/x.svg" alt="">
							<div class="word">
								<view class="txt">{{ item.name }}</view>
								<view class="num">您可前往洗衣房正常使用</view>
							</div>
							<div class="btn">
								空闲中
							</div>
						</navigator>
					</view>
					<view v-else>
						<view class="iteminfo selects">
							<img src="../../static/x.svg" alt="">
							<div class="word">
								<view class="txt">{{ item.name }}</view>
								<view class="num">还剩30分钟</view>
							</div>
							<div class="btn">
								洗衣中
							</div>
						</view>
					</view>
				</view>
				<div class="clear"></div>
			</view>

			<view class="list" v-if="type == 1">
				<view class="item" v-for="(item, index) in detail.czarr1">
					<view v-if="item.stutas == true">
						<navigator @tap="gotoact(id, item.name)" class="iteminfo">
							<img src="../../static/h.svg" alt="">
							<div class="word">
								<view class="txt">{{ item.name }}</view>
								<view class="num">您可前往洗衣房正常使用</view>
							</div>
							<div class="btn">
								空闲中
							</div>
						</navigator>
					</view>
					<view v-else>
						<view class="iteminfo selects">
							<img src="../../static/h.svg" alt="">
							<div class="word">
								<view class="txt">{{ item.name }}</view>
								<view class="num">还剩15分钟</view>
							</div>
							<div class="btn">
								烘干中
							</div>
						</view>
					</view>
				</view>
				<div class="clear"></div>
			</view>
		</view>
		<com-map ref="commap" :address="address"></com-map>
		<com-tabbar :currentTab="currentTab"></com-tabbar>
		<!-- 登陆组件 -->
		<com-login ref="login"></com-login>
	</view>
</template>

<script>
import {
	mapState,
	mapActions
} from 'vuex'
let that
export default {
	data() {
		return {
			tablist: [{
				name: '洗衣机',
			}, {
				name: '烘干机',
			}],
			type: 0,//1:正在洗 2:已结束
			list: [
				{
					ordernum: '20240612123456',
					status: 'charging',
					statusstr: '洗衣中',
					times: '1.5',
					price: '15.00',
					dpnum: '1001',
					detail: {
						dpcinfo: {
							title: '测试洗衣机',
							address: '北京市海淀区',
						},
						start: '2024-06-12 12:00:00',
						end: '2024-06-12 13:30:00',
					},
				},
				{
					ordernum: '20240612123457',
					status: 'charged',
					statusstr: '已结束',
					times: '2.5',
					price: '25.00',
					dpnum: '1002',
					detail: {
						dpcinfo: {
							title: '测试洗衣机2',
							address: '北京市海淀区',
						},
						start: '2024-06-12 14:00:00',
						end: '2024-06-12 16:30:00',
					},
				}
			],
			currentpage: 1, //当前页码
			isBottom: false, //是否请求完毕数据

			text1: '洗衣前请检查衣服口袋内有无贵重、尖锐物品',
			id: '',
			address: '北京市海淀区',
			banner: ["https://cdn.uviewui.com/uview/album/1.jpg"],
			list: [],//插座列表
			currentTab: "home",
			detail:
			{
				title: '洗衣店A',
				czarr: [
					{
						name: '1号洗衣机',
						num: '1',
						stutas: true
					},
					{
						name: '2号洗衣机',
						num: '2',
						stutas: false
					}
				],
				czarr1: [
					{
						name: '3号烘干机',
						num: '3',
						stutas: true
					},
					{
						name: '4号烘干机',
						num: '4',
						stutas: false
					}
				],
			}
			,
			issc: 0, //是否收藏
		}
	},
	onLoad(e) {
		this.id = e.id
	},
	onShow() {
		// this.getdetail()
	},
	mounted() {
		that = this
	},
	computed: {
		//引入store全局变量
		...mapState(['loginState', 'userInfo', 'mylocation'])
	},
	methods: {
		//获取电站详情
		getdetail() {
			this.$http_api.dpcdetail({
				uid: this.userInfo.id,
				id: this.id
			}).then((res) => {
				that.banner = res.images
				that.issc = res.issc
				that.detail = res
				that.address = res.address
			})
		},
		//收藏
		shouc() {
			if (!this.loginState) {
				this.$refs.login.openLogin()
				return
			}
			this.$http_api.dpcsc({
				uid: this.userInfo.id,
				id: this.id
			}).then((res) => {
				that.issc = res
			})
		},
		//选择插座
		gotoact(id, num) {
			// if (!this.loginState) {
			// 	// 调用子组件方法
			// 	this.$refs.login.openLogin()
			// 	return
			// }
			uni.navigateTo({
				url: '/pages/detail/act-electromobile?id=' + id + '&num=' + num
			})
		},
		//跳转第三方地图
		toMapAPP() {
			//调用子组件方法
			this.$refs.commap.toMapAPP()
		},
		//切换导航
		clicknav(item) {
			this.currentpage = 1
			this.isBottom = false
			// this.list = []
			this.type = item.index
			// this.getlist(this.type)
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	padding: 0 3%;
	box-sizing: border-box;
}

.u-demo-block {
	width: 100%;
	padding-top: 40rpx;
}

.detail {
	position: relative;

	.gotomap {
		position: absolute;
		right: 20rpx;
		bottom: 0;
		display: flex;
		font-size: 28rpx;
		color: #333;

		text {
			margin-left: 3px;
		}
	}

	.shouc {
		position: absolute;
		top: 2px;
		right: 0;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		margin: 40rpx 0 20rpx;
	}

	.info {
		margin-bottom: 10rpx;
	}
}

.select {
	margin-top: 20rpx;

	.title {
		// width: 100px;
		font-size: 38rpx;
		font-weight: bold;
		// text-align: center;
		margin-bottom: 50rpx;
		padding-bottom: 10rpx;
		// border-bottom: 2px solid #23BF61;
	}

	.list {
		margin-top: 20rpx;

		.item .iteminfo {
			width: 17%;
			margin-right: 3%;
			border: 1px solid #23BF61;
			float: left;
			padding: 30rpx 0;
			text-align: center;
			color: #23BF61;
			margin-bottom: 40rpx;
			border-radius: 10rpx;

			.txt {
				font-size: 50rpx;
				font-weight: bold;
			}
		}

		.item .iteminfo.selects {
			border: 1px solid rgba(241, 0, 0, 0.4);
			background: rgba(241, 0, 0, 0.4);

			.txt {
				color: #f10000;
			}

			.num {
				color: #f10000;
			}
		}

		.item:nth-child(5n) .iteminfo {
			margin-right: 0;
		}
	}
}

.content .list {
	margin-top: 20rpx;

	.item .iteminfo {
		// border: 1px solid #23BF61;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		padding: 30rpx 0;
		color: #23BF61;
		margin-bottom: 40rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		img {
			width: 100rpx;
			height: 100rpx;
		}

		.word {
			width: 60%;

			.txt {
				font-size: 34rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
		}
	}

	.item .iteminfo.selects {

		box-shadow: none;
		border: 1px solid rgba(0, 0, 0, 0.4);
	}

	.item:nth-child(5n) .iteminfo {
		margin-right: 0;
	}
}
</style>